<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test" style="width: 100px; height: 100px; background-color: black;"></div>
    <script>
        /*
            背景：有些方法分别被不同的浏览器支持，如果代码需要覆盖比较大的群体（如适应多种浏览器等），就需要提前进行判断
            经常需要判断的就是事件监听：
                addEventListner(主流浏览器的方法)和attachEvent(IE方法)
                我们通过变量whichEvent接收当前浏览器支持的事件监听方法
        */
       const whichEvent = ( function() {
           if( window.addEventListener ) {
               return function( element, type, callBack ) {
                   element.addEventListener( type, function(e) {
                       callBack.call( element, e );
                   });
               }
           } else if( window.attachEvent ) {
               return function ( element, type, callBack ) {
                   element.attachEvent( 'on'+type, function(e) {
                       callBack.call( element, e );
                   });
               }
           }
       })();
       //测试：使用我们写的whichEvent方法给元素添加监听事件
       let dom = document.getElementById("test");
       whichEvent(dom, "click", function(event) {
           console.log(event);
       })
       /*
            理解：whichEvent是一个立即执行函数的返回结果，也就是说，这个立即执行函数返回了一个函数，
            返回的这个函数有什么特点呢，就是不用用if-else进行判断浏览器有哪种给元素添加监听的方法。
            说白了，经过柯里化处理（柯里化是一种技术，这种技术的直观体现是“函数里面返回函数”），我们
            省略了一部分代码逻辑，避免每一次都判断。
       */
    </script>
</body>
</html>